<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网盘系统 - 用户登录</title>
    <link href="/static/css/app.css" rel="stylesheet" />
  </head>
  <body class="bg-light">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
          <div class="card shadow-sm mt-5">
            <div class="card-header bg-info text-white text-center">
              <h4 class="mb-0">企业文档存储系统</h4>
              <small>基于 OpenStack Swift 对象存储</small>
            </div>
            <div class="card-body">
              {{if .error}}
              <div class="alert alert-danger" role="alert">{{.error}}</div>
              {{end}}

              <form method="POST" action="/login">
                <div class="mb-3">
                  <label for="username" class="form-label">用户名</label>
                  <input
                    type="text"
                    class="form-control"
                    id="username"
                    name="username"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label for="password" class="form-label">密码</label>
                  <input
                    type="password"
                    class="form-control"
                    id="password"
                    name="password"
                    required
                  />
                </div>
                <button type="submit" class="btn btn-info w-100">登录</button>
              </form>
            </div>
          </div>

          <!-- 测试账号信息 -->
          <div class="card mt-4">
            <div class="card-header">
              <h6 class="mb-0">测试账号信息</h6>
            </div>
            <div class="card-body">
              <small class="text-muted">请确保已按照README完成Swift配置</small>
              {{if .username }}
              <div
                class="border rounded p-2 mb-2 bg-light"
                style="cursor: pointer; padding: 10px"
                onclick="fillCredentials('{{.username}}', '{{.password}}')"
              >
                <small>
                  认证方式： <code>{{.auth_mode}}</code><br />
                  用户名: <code>{{.username}}</code><br />
                  密码: <code>{{.password}}</code><br />
                </small>
              </div>
              {{end}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      function fillCredentials(username, password) {
        document.getElementById("username").value = username;
        document.getElementById("password").value = password;
      }
    </script>
  </body>
</html>
